<!DOCTYPE html>
<html>
<head>
    <title>API 测试页面</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>API 连接测试</h1>
    <button onclick="testAPI()">测试 API 连接</button>
    <button onclick="testAddService()">测试添加服务</button>
    <button onclick="testWebSocket()">测试 WebSocket 连接</button>
    <div id="result"></div>

    <script>
        const API_URL = 'http://localhost:8081/api';
        
        async function testAPI() {
            const result = document.getElementById('result');
            result.innerHTML = '测试中...';
            
            try {
                const response = await fetch(`${API_URL}/health`);
                const data = await response.json();
                
                result.innerHTML = `
                    <h3>✅ API 连接成功</h3>
                    <p><strong>响应:</strong> ${JSON.stringify(data, null, 2)}</p>
                `;
            } catch (error) {
                result.innerHTML = `
                    <h3>❌ API 连接失败</h3>
                    <p><strong>错误:</strong> ${error.message}</p>
                `;
            }
        }
        
        async function testAddService() {
            const result = document.getElementById('result');
            result.innerHTML = '测试添加服务...';
            
            try {
                const serviceConfig = {
                    id: 'test-' + Date.now(),
                    name: '测试服务',
                    description: '这是一个测试服务',
                    executablePath: 'C:\\Windows\\System32\\notepad.exe',
                    autoStart: false
                };
                
                const response = await fetch(`${API_URL}/services`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(serviceConfig)
                });
                
                const data = await response.json();
                
                if (response.ok) {
                    result.innerHTML = `
                        <h3>✅ 添加服务成功</h3>
                        <p><strong>响应:</strong> ${JSON.stringify(data, null, 2)}</p>
                    `;
                } else {
                    result.innerHTML = `
                        <h3>❌ 添加服务失败 (HTTP ${response.status})</h3>
                        <p><strong>错误:</strong> ${JSON.stringify(data, null, 2)}</p>
                    `;
                }
            } catch (error) {
                result.innerHTML = `
                    <h3>❌ 添加服务异常</h3>
                    <p><strong>错误:</strong> ${error.message}</p>
                `;
            }
        }
        
        async function testWebSocket() {
            const result = document.getElementById('result');
            result.innerHTML = '测试 WebSocket 连接...';
            
            try {
                const ws = new WebSocket('ws://localhost:8081');
                
                ws.onopen = () => {
                    result.innerHTML = `
                        <h3>✅ WebSocket 连接成功</h3>
                        <p><strong>状态:</strong> 连接已建立</p>
                        <p><strong>地址:</strong> ws://localhost:8081</p>
                    `;
                    ws.close();
                };
                
                ws.onerror = (error) => {
                    result.innerHTML = `
                        <h3>❌ WebSocket 连接失败</h3>
                        <p><strong>错误:</strong> 连接无法建立</p>
                        <p><strong>地址:</strong> ws://localhost:8081</p>
                    `;
                };
                
                // 5秒后超时
                setTimeout(() => {
                    if (ws.readyState === WebSocket.CONNECTING) {
                        ws.close();
                        result.innerHTML = `
                            <h3>❌ WebSocket 连接超时</h3>
                            <p><strong>错误:</strong> 连接超时5秒</p>
                        `;
                    }
                }, 5000);
                
            } catch (error) {
                result.innerHTML = `
                    <h3>❌ WebSocket 连接异常</h3>
                    <p><strong>错误:</strong> ${error.message}</p>
                `;
            }
        }
    </script>
</body>
</html>